<template>
  <view>
    <view class="cu-bar bg-white shadow">
      <view class="action" @click="clickCalendar">
        <text class="cuIcon-formfill text-orange"></text>打卡日历
      </view>

      <view class="action" @click="clickClock">
        <text class="cuIcon-writefill text-grey"></text>打卡
      </view>
    </view>

	<block v-for="(item, index) in allClockList" :key="index">
		<my-clock-in :item="item" :Fav="true"></my-clock-in>
	</block>
		
  </view>
</template>

<script>
import myClockIn from '../../component/myClockIn.vue';
import moment from "moment";
moment.locale("zh-cn");
export default {
  components: {
    myClockIn
  },
  data() {
    return {
      contentText: {
        contentDefault: "关注",
        contentFav: "已关注"
      },
      params: {
        //获取更多的参数
        limit: 10,
        skip: 0
      },
      allClockList: []
    };
  },
  mounted() {},
  onLoad() {
    this.getAllClock();
  },
  onShow: function(e) {
    this.getAllClock();
  },
  methods: {
    getAllClock() {
      this.request({
        url:
          this.apiServer +
          "/task/findDailyTask?limit=" +
          this.params.limit +
          "&skip=" +
          this.params.skip +
          "&uId=" +
          uni.getStorageSync("user").id
      }).then(res => {
        console.log(res);
        res.data.forEach(v => {
          v.cnTime = moment(v.createTime).format("YYYY-MM-DD HH:mm:ss");
        });
        this.allClockList = res.data;
      });
    },
    clickClock() {
      //打卡
      uni.navigateTo({
        url: "./clock/index",
        success: res => {},
        fail: () => {
          console.log(假的);
        },
        complete: () => {}
      });
    },
    clickCalendar() {
      //打卡日历
      uni.navigateTo({
        url: "./calendar/index",
        success: res => {},
        fail: () => {
          console.log(假的);
        },
        complete: () => {}
      });
    },
    clickComment(index) {
      uni.navigateTo({
        url: "../comment/index?PId=" + index,
        success: res => {},
        fail: () => {
          console.log(假的);
        },
        complete: () => {}
      });
    },
    ViewImage(imgUrl) {
      //console.log("预览图片")
      uni.previewImage({
        urls: [imgUrl]
        //current: e.currentTarget.dataset.url
      });
    },
    onShareAppMessage(res) {
      if (res.from === "button") {
        // 来自页面内分享按钮
        console.log(res.target);
      }
      return {
        title: "自定义分享标题",
        path: "/pages/clockIn/index"
      };
    },
    handFollow(index) {
      this.allClockList[index].isfollow = !this.allClockList[index].isfollow;
      this.$forceUpdate();
      var status;
      if (this.allClockList[index].isfollow == true) {
        //未关注=>关注了
        status = 1;
      } else {
        //关注=>未关注
        status = 2;
      }
      this.request({
        url: this.apiServer + "/follow/doTaskFollow",
        method: "POST",
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: {
          pId: this.allClockList[index].id,
          uId: uni.getStorageSync("user").id,
          status: status
        }
      }).then(res => {
        console.log(res);
      });
    },
    handLike(index) {
      if (this.allClockList[index].islike == false) {
        this.allClockList[index].like++;
      } else {
        this.allClockList[index].like--;
      }
      this.allClockList[index].islike = !this.allClockList[index].islike;
      //判断
      var status;
      if (this.allClockList[index].islike == true) {
        //未点赞=>点赞
        status = 1;
      } else {
        //点赞=>未点赞
        status = 2;
      }
      this.request({
        url: this.apiServer + "/like/doTaskLike",
        method: "POST",
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: {
          pId: this.allClockList[index].id,
          uId: uni.getStorageSync("user").id,
          status: status
        }
      }).then(res => {
        console.log(res);
      });
    }
  }
};
</script>

<style>
.index-list {
  border-bottom: 1upx solid #ffffff;
  padding: 20upx;
  background-color: #ffffff;
}
.index-list1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.index-list1 > view:first-child {
  display: flex;
  align-items: center;
}
.index-list1 > view:first-child image {
  width: 100upx;
  height: 100upx;
  border-radius: 40upx;
  margin-right: 10upx;
}
.index-list1 > view:first-child view {
  margin-left: 10upx;
  color: #999999;
}
.index-list1 > view:last-child {
}
.index-list2 {
  padding: 15upx;
  font-size: 32upx;
}
.index-list3 {
}
.index-list3 > image {
  width: 100%;
  border-radius: 20upx;
}
.index-list4 {
  color: #999999;
}
.index-list4 {
  padding: 20upx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.index-list4 > view {
  display: flex;

  align-items: center;
}
.index-list4 > view > view:first-child {
  font-size: 40upx;
}
.active {
  color: #ffaa7f;
}
.bar-flex {
  padding: 20upx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
